<template>
<view class="basic-information-box padding-bottom-lg">
  <form>
    <view class="padding text-gray text-bold">填写您的真实、详细信息可加快审核</view>
    <view class="cu-form-group" @tap="openAddres">
      <view class="title">常住地址</view>
      <view class="action flex-sub">
        <text>{{addressRegionLabel}}</text>
      </view>
      <text class='cuIcon-right'></text>
    </view>
    <view class="cu-form-group">
      <textarea maxlength="-1" :disabled="false" @input="addressInput" placeholder="详细地址: 如道路、门牌号、小区、楼栋号、单元室" :value="addressConfig.address"></textarea>
    </view>
    <view class="padding text-bold">紧急联系人1</view>
    <view class="cu-form-group">
      <view class="title">联系人关系</view>
      <picker mode="selector" range-key="title" @change="relationOnePickerChange" :range="relationList">
        <view class="picker">
          <text v-if="relationList[relationConfig.oneshipid]">{{relationList[relationConfig.oneshipid].title}}</text>
          <text class="text-gray" v-else>请选择</text>
        </view>
      </picker>
    </view>
    <view class="cu-form-group">
      <view class="title">联系人姓名</view>
      <input placeholder="请输入联系人姓名" name="oneshipname" @input="relationOneNameChange" :value="relationConfig.oneshipname"/>
      <view class="text-xxl">
        <text class='cuIcon-addressbook' @tap="openAddressbook('oneship')"></text>
      </view>
    </view>
    <view class="cu-form-group">
      <view class="title">联系人电话</view>
      <input placeholder="请输入联系人电话" name="oneshipphone" :maxlength="20" @input="relationOnePhoneChange" :value="relationConfig.oneshipphone"/>
    </view>
    <view class="padding text-bold">紧急联系人2</view>
    <view class="cu-form-group">
      <view class="title">联系人关系</view>
      <picker mode="selector" range-key="title" @change="relationTwoPickerChange" :range="relationList">
        <view class="picker">
          <text v-if="relationList[relationConfig.twoshipid]">{{relationList[relationConfig.twoshipid].title}}</text>
          <text class="text-gray" v-else>请选择</text>
        </view>
      </picker>
    </view>
    <view class="cu-form-group">
      <view class="title">联系人姓名</view>
      <input placeholder="请输入联系人姓名" name="twoshipname" @input="relationTwoNameChange" :value="relationConfig.twoshipname"/>
      <view class="text-xxl">
        <text class='cuIcon-addressbook' @tap="openAddressbook('twoship')"></text>
      </view>
    </view>
    <view class="cu-form-group">
      <view class="title">联系人电话</view>
      <input placeholder="请输入联系人电话" name="twoshipphone" :maxlength="20" @input="relationTwoPhoneChange" :value="relationConfig.twoshipphone"/>
    </view>
  </form>
  <simple-address ref="simpleAddress" :pickerValueDefault="addressConfig.addressRegion" @onConfirm="onRegionChange" themeColor='#ffc27e'></simple-address>

  <view class="flex flex-direction margin-tb padding" v-if="!isinfo">
    <button type="submit" class="cu-btn dm-btn round bg-orange text-xl" @tap="onSubmit" :disabled="isinfo">提交</button>
  </view>
</view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'basic-information',
  data () {
    return {
      addressConfig: {
        address: '',
        addressRegion: [0, 0, 0],
        province: '',
        city: '',
        area: '',
      },
      relationConfig: {
        oneshipid: -1,
        oneshipname: '',
        oneshipphone: '',
        twoshipid: -1,
        twoshipname: '',
        twoshipphone: '',
      },
      relationIndex: -1,
      relationList: []
    }
  },
  computed: {
    ...mapGetters([
      'userBasicInfo',
      'emergencyContact'
    ]),
    /** 是否基本信息认证 */
    isinfo() {
      return this.userBasicInfo.isinfo == 1
    },
    addressRegionLabel() {
      let target = ''
      target += this.addressConfig.province ? `${this.addressConfig.province}-` : ''
      target += this.addressConfig.city ? `${this.addressConfig.city}-` : ''
      target += this.addressConfig.area ? `${this.addressConfig.area}` : ''
      return target
    },
    infoParams() {
      const { province, city, area, address } = this.addressConfig
      return {
        province,
        city,
        area,
        address,
        ...this.relationConfig
      }
    }
  },
  watch: {
    emergencyContact() {
      console.log('紧急联系人改变')
      for (const key in this.emergencyContact) {
        if (this.emergencyContact.hasOwnProperty(key)) {
          this.relationConfig[key] = this.emergencyContact[key]
        }
      }
    }
  },
  created() {
    console.log('emergencyContact', this.emergencyContact)
    this.init()
    console.log('addressConfig', this.addressConfig)
    console.log('relationConfig', this.relationConfig)
  },
  methods: {
    async init() {
      await this.getRelation()
      // 从全局获取到用户的基本信息并赋值
      for (const key in this.userBasicInfo) {
        if (this.relationConfig.hasOwnProperty(key) && this.userBasicInfo[key]) {
          this.relationConfig[key] = this.userBasicInfo[key]
        }
        if (this.addressConfig.hasOwnProperty(key) && this.userBasicInfo[key]) {
          this.addressConfig[key] = this.userBasicInfo[key]
        }
      }

      for (const key in this.emergencyContact) {
        if (this.emergencyContact.hasOwnProperty(key) && this.emergencyContact[key]) {
          this.relationConfig[key] = this.emergencyContact[key]
        }
      }
    },
    async onSubmit() {
      console.log('提交')
      console.log('addressConfig', this.addressConfig)
      console.log('relationConfig', this.relationConfig)
      const flag = await this.verifyParams()
      if (!flag) return
      await this.updateUserBasicInfo()
      this.$Router.back()
    },
    /** 获取关系列表 */
    getRelation() {
      return new Promise(resolve => {
        this.$api.getRelation().then(res => {
          resolve()
          console.log('关系列表', res)
          if (!res) return
          this.relationList = res.data
        })
      })
    },
    /** 修改用户基本信息 */
    updateUserBasicInfo() {
      return new Promise(resolve => {
        this.$api.updateUserBasicInfo(this.infoParams).then(async res => {
          if (!res) return
          await this.$showSuccessToast('提交成功')
          resolve()
        })
      })
    },
    verifyParams() {
      return new Promise(resolve => {
        let flag = false
        if (this.addressConfig.addressRegionLabel === '' || this.addressConfig.address === '') {
          this.$showTipsToast('请填写地址')
        } else if (this.relationConfig.oneshipid === -1) {
          this.$showTipsToast('请选择与紧急联系人1的关系')
        } else if (this.relationConfig.oneshipname === '') {
          this.$showTipsToast('请填写紧急联系人1的姓名')
        } else if (this.relationConfig.oneshipphone === '') {
          this.$showTipsToast('请填写紧急联系人1的电话')
        } else if (this.relationConfig.twoshipid === -1) {
          this.$showTipsToast('请选择与紧急联系人2的关系')
        } else if (this.relationConfig.twoshipname === '') {
          this.$showTipsToast('请填写紧急联系人2的姓名')
        } else if (this.relationConfig.twoshipphone === '') {
          this.$showTipsToast('请填写紧急联系人2的电话')
        } else {
          flag = true
        }
        resolve(flag)
      })
    },
    openAddressbook(key) {
      this.$Router.push({
        name: 'address-book',
        params: {
          type: 'emergency',
          typekey: key
        }
      })
    },
    onRegionChange(e) {
      const regionArr = e.label.split('-')
      this.addressConfig.province = regionArr[0]
      this.addressConfig.city = regionArr[1]
      this.addressConfig.area = regionArr[2]
      console.log('选中地区', this.addressConfig)
    },
    addressInput(e) {
      this.addressConfig.address = e.detail.value
    },
    relationOnePickerChange(e) {
      this.relationConfig.oneshipid = e.detail.value
    },
    relationOneNameChange(e) {
      this.relationConfig.oneshipname = e.detail.value
    },
    relationOnePhoneChange(e) {
      this.relationConfig.oneshipphone = e.detail.value
    },
    relationTwoPickerChange(e) {
      this.relationConfig.twoshipid = e.detail.value
    },
    relationTwoNameChange(e) {
      this.relationConfig.twoshipname = e.detail.value
    },
    relationTwoPhoneChange(e) {
      this.relationConfig.twoshipphone = e.detail.value
    },
    openAddres() {
      this.$refs.simpleAddress.open()
    }
  }
}
</script>

<style lang="less">
</style>
